
<template>
  <view class="main_box">
    <order-top text="其他入库单" @add="addOrder" style="background: white" placeholder="仓库/仓库编码" @change="changeKey"/>
    <status-box :tabs="tabs" style="background: white" :curIndex="curStatusIndex"  @change="changeStatus"/>
    <scroll-view class="list"  scroll-y="true" @scrolltolower="query.page++" refresher-enabled="true" :refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="init">
      <checkbox-group  @change="changeSelect">
        <view class="orderInfoBox" v-for="item in dataList">
          <view><checkbox :value="item.id.toString()"  /></view>
          <view class="orderInfo" @tap="jumpOrderDetail(item)">
            <view class="orderInfo_title ">
              <view>单据编码</view>
              <view>单据状态</view>
            </view>
            <view  class="orderInfo_title code_box">
              <view class="orderCode">{{ item.code }}</view>
              <view class="status">{{ statusType[item.orderStatus] }}</view>
            </view>
            <view class="detail_base_info">
              <view class="base_info_list">日期: {{ item.busDate }}</view>
              <view class="flex base_info_list" style="justify-content: space-between;">
                <view>入库仓库: {{ item.warehouseName }}</view>
                <view>入库数量: {{ item.boxCount }}箱</view>
              </view>
              <view class="base_info_list">备注：{{ item.remark }}</view>
            </view>
            <view class="orderInfo_price">
              入库金额<span class="price">{{ item.taxAmount }}</span>
            </view>
          </view>
        </view>
      </checkbox-group>
    </scroll-view>
    <view class="btm" v-if="curStatusIndex === 0">
      <view class="btn" @tap="pass">
        提交
      </view>
    </view>
  </view>
</template>

<script >
import OrderTop from "@/components/orderTop.vue";
import pageMixin from "@/mixins/pageMixin";
import {getWareOtherEnter, passWareOtherEnter} from "@/request/api/inventory";
import CustomerInfo from "@/components/customerInfo.vue";
import StatusBox from "@/components/status-box.vue";
export default {
  mixins: [pageMixin],
  components: {StatusBox, CustomerInfo, OrderTop},
  data() {
    return {
      keyword:"",
      selectList:[],
      statusType:{
        SAVE:"未完成",
        PASS:"已完成"
      },
      params:{
        orderStatus:"SAVE"
      },
      curStatusIndex:0,
      tabs:[
          {
            text: "未完成",
            value: "SAVE"
          },
          {
            text: "已完成",
            value: "PASS"
          }
      ]
    }
  },
  created() {
    this.onGet()
  },
  onShow() {
    this.init();
  },
  methods: {
    init(){
      this.dataList = []
      this.query.page = 1
    },
    async onGet() {
      const res = await getWareOtherEnter({...this.query,...this.params,keyword:this.keyword})
      this.dataList = res.data.content;
      this.total = res.data.totalElements;
    },
    changeStatus(e){
      this.curStatusIndex = e;
      this.params.orderStatus = this.tabs[e].value
      this.init()
    },
    addOrder(){
      uni.navigateTo({url: `/pages/other-enter/detail?id=ADD`})
    },
    jumpOrderDetail(order){
      uni.navigateTo({url: `/pages/other-enter/detail?id=${order.id}`})
    },
    changeKey(e){
      this.keyword = e
      this.query.page = 1
    },
    changeSelect(e){
      this.selectList = e.detail.value
    },
    async pass(){
      uni.showLoading({title: "提交中..."})
      const res = await passWareOtherEnter(this.selectList)
      uni.hideLoading()
      if (res.status === 200){
        uni.showToast({
          title: "操作成功",
          icon: "none"
        })
        this.init()
      }else{
        uni.showToast({
          title: res.msg,
          icon: "none"
        })
      }
    }
  }
};

</script>


<style scoped lang="scss">
.main_box{
  height: 100%;
  display: flex;
  flex-direction: column;
  .list{
    flex: 1;
    background: #F2F5F8;
    margin-top: 10rpx;
    .orderInfoBox{
      background: white;
      padding: 20rpx;
      margin: 10rpx auto 0;
      width: 90%;
      display: flex;
      align-items: center;
      border-radius: 10rpx;

      .orderInfo{
        width: 100%;
        .orderInfo_title{
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-left: 10rpx;
        }
        .code_box{
          height: 60rpx;
          display: flex;
          align-items: center;
          .orderCode{
            font-size: 30rpx;
            font-weight: bold;
          }
          .status{
            color: #6CBFF7;
            font-weight: bold;
          }
        }
        .detail_base_info{
          padding: 10rpx 0;
          border-top:1px solid #E5E5E5 ;
          border-bottom: 1px solid #E5E5E5;
          .base_info_list{
            height: 50rpx;
            display: flex;
            align-items: center;
          }
        }
        .orderInfo_price{
          display: flex;
          justify-content: flex-end;
          height: 50rpx;
          margin-top: 10rpx;
          align-items: center;
          .price{
            font-weight: bold;
            margin-left: 10rpx;
            &:before{
              content: "¥";
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }
}
.btm{
  width: 100%;
  height: 100rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn{
    background: #007aff;
    color: white;
    height: 80rpx;
    border-radius: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
  }
}
page {
  height: 100%;
}
</style>